import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";
import { Plus } from "lucide-react";
import { DialogHeader } from "./ui/dialog";
import classNames from "classnames";
const UserButton = () => {
  const cs = classNames(
    "w-16 text-lg rounded-3xl ",
    "flex items-center justify-center",
    "border-white border-2 bg-inherit",
    "hover:bg-pink-700"
  );
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button className={cs}>
          <Plus className="text-white" />
        </Button>
      </DialogTrigger>
      <DialogContent className="p-0 bg-white border-none max-w-[480px] h-28">
        <DialogHeader>
          <DialogTitle>你真的决定好要做什么了吗?</DialogTitle>
          <DialogDescription>这是一段话</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

export default UserButton;
